<template>
  <div class="m-contain notice">
    <van-nav-bar title="通知"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="m-main">
      <div class="date text-center font-size-12">
        2020-10-10 12:00:00
      </div>
      <div class="content">
        <div>
          <img :src="icon"
               width="22" />
          <span class="title font-size-15">通知</span>
          <p>关于系统升级的公告</p>
        </div>
      </div>
      <div class="date text-center font-size-12">
        2020-10-10 12:00:00
      </div>
      <div class="content">
        <div>
          <img :src="icon"
               width="22" />
          <span class="title font-size-15">平安公告</span>
          <p>关于系统升级的公告关于系统升级的公告关于系统升级的公
            告关于系统升级的公告</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar } from 'vant';
Vue.use(NavBar)
export default {
  name: 'Notice',
  data () {
    return {
      icon: require('@/assets/image/notice/icon-notice.png')
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    }
  }
}
</script>
<style lang="less" scoped>
.notice {
  width: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
}
.font-size-15 {
  font-size: 0.9375rem;
}
.title {
  margin-left: 9px;
  color: #000;
}
p,
.date {
  margin-top: 10px;
  line-height: 21px;
  font-size: 12px;
  color: #333333;
}
p {
  letter-spacing: 0.4px;
  line-height: 28px;
}
.date {
  margin-top: 18px;
  margin-bottom: 13px;
}
.content {
  width: calc(100% - 30px);
  margin: 0 auto;
  padding: 12px 17px;
  border-radius: 5px;
  background-color: #fff;
  img {
    vertical-align: -4px;
  }
}
</style>